<template>
  <div class="header-option flex justify-center wh-full p-1">
    <el-dropdown trigger="hover" class="h-full ">
        <RouterLink  :to="`/accountCenter/postList/${user._id}`">
          <img  :src="IMG_URL_SERVER + user?.avatar?.url" :alt="user?.avatar?.name" class="avatar"/>
        </RouterLink>
        <template #dropdown>
          <el-dropdown-menu>
            <RouterLink :to="`/accountCenter/postList/${user._id}`"> 
              <el-dropdown-item :icon="CirclePlus">
                个人中心 
              </el-dropdown-item>
            </RouterLink>
            <RouterLink to="/message"> 
              <el-dropdown-item :icon="CirclePlus">
                消息中心 
              </el-dropdown-item>
            </RouterLink>
            <el-dropdown-item :icon="CirclePlus" @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import {
  CirclePlus,
} from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia';
import { IMG_URL_SERVER } from "@/config"

const logout = ()=>{
  const auth = useAuthStore()
  auth.setAuth(false)
  location.reload()
}


const authStore = useAuthStore()
const { user }  = storeToRefs<any>(authStore)

</script>

<style scoped lang="scss">
  .header-option{
    height: 100%;
    width: 100%;
    img.avatar{
      object-fit: cover;
      height: 100%;
      margin: auto;
    }
  }
</style>